<template>
  <div class="classify">
    <div class="classify_left">
      全部商品分类
      <!-- 一级分类 -->
      <div class="shuffling_main">
        <div class="shuffling_box">
          <div
            class="shuffling_item"
            v-for="(item, index) in list"
            :key="index"
            @mouseover="changeActive(item.title, index)"
            @mouseout="changeOut"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <!-- 二级分类 -->
      <div class="twoMenu" ref="twoMenu">
        <div class="twoMenu_title">{{ twoName }}</div>
        <div class="twoMenu_box">
          <div class="twoMenu_item" v-for="(item, index) in 11" :key="index">
            <div class="twoMenu_top">
              <img src="../image/pic1.png" alt="" />
            </div>
            <div class="twoMenu_bottom">题标题标题</div>
          </div>
        </div>
      </div>
      <!-- 二级分类 -->
    </div>
    <div class="classify_box">
      <div class="classify_item">推荐分类</div>
      <div class="classify_item">推荐分类</div>
      <div class="classify_item">推荐分类</div>
      <div class="classify_item">推荐分类</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { title: "技工产品" },
        { title: "常用药品" },
        { title: "医疗器械" },
        { title: "技工产品" },
        { title: "常用药品" },
        { title: "医疗器械" },
        { title: "技工产品" },
        { title: "常用药品" },
      ],
      twoName: "",
    };
  },
  methods: {
    // 鼠标移入
    changeActive(item, index) {
      console.log("鼠标移入");
      console.log(item);
      console.log(index);
      this.twoName = item;
      this.$refs.twoMenu.style = "display:block;";
    },
    //鼠标移出
    changeOut() {
      console.log("鼠标移出");
      this.$refs.twoMenu.style = "display:none;";
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/classify2.css");
</style>